import React, { useState, useEffect, use } from "react";
import { Form, Input, Cascader, Button, Toast, Switch } from "antd-mobile";
import "./index.css";
import areaData from 'china-area-data';
import addressApi from '@/api/iap/address'
import { useNavigate, useSearchParams } from "react-router-dom";

export default () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [selectedAddress, setSelectedAddress] = useState(''); // 存储显示的地址字符串
  const [addressCodes, setAddressCodes] = useState([]); // 存储选择的地址编码
  const [btnLoading, setBtnLoading] = useState(false);
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const [id, setId] = useState('')
  const [returnUrl, setReturnUrl] = useState('')
  const [defaultChecked, setDefaultChecked] = useState(false)
  const [addressTree, setAddressTree] = useState([])

  useEffect(() => {
    // 定义内部异步函数，实现顺序执行
    const init = async () => {
      try {
        // 1. 先加载地址树（必须先完成）
        await getAddressTree();

        // 2. 地址树加载完成后，再获取地址详情（如果有id）
        // const id = searchParams.get('id');
        const returnUrl = searchParams.get('returnUrl') || '/address';
        setReturnUrl(returnUrl);
     
      } catch (error) {
        // console.error('初始化失败:', error);
        // Toast.show({ content: '数据加载失败', type: 'fail' });
      }
    };

    init(); // 执行内部异步函数
  }, []); // 依赖searchParams变化时重新执行
  useEffect(() => {
    const id = searchParams.get('id');
    setId(id || "");
    if (id) {
      getAddressInfo(id); // 此时addressTree已存在
    }
  }, [addressTree])

  x
  // 让getAddressTree返回Promise，支持await
  const getAddressTree = async () => {
    return new Promise((resolve, reject) => {
      const convertToBFormat = (items) => {
        if (!Array.isArray(items)) return [];
        return items.map(item => ({
          label: item.name,
          value: item.id,
          children: item.children.length > 0 ? convertToBFormat(item.children) : null
        }));
      };

      addressApi.address_tree()
        .then(res => {
          const data = convertToBFormat(res.data);
          setAddressTree(data);
          resolve();
        })
        .catch(error => {
          console.error("地址树加载失败:", error);
          reject(error);
        });
    });
  };



  const getAddressInfo = async (id) => {
    let res = await addressApi.address_get({ id: id })
    console.log('地址详情', res.data)
    setSelectedAddress(res.data.areaName)

    const codesStr = getCodeArray(res.data.areaId)


    console.log('codesStr', codesStr)
    setDefaultChecked(res.data.defaultStatus ? true : false)
    setAddressCodes(codesStr)
    // 将地址信息存入表单
    form.setFieldsValue({
      name: res.data.name,
      mobile: res.data.mobile,
      address: res.data.areaName,
      detailAddress: res.data.detailAddress,
      defaultStatus: res.data.defaultStatus ? true : false
    });
  }
  // // 根据子级编码获取编码数组
  // const getCodeArray = (code) => {
  //   console.log('根据子级编码获取编码数组', code)
  //   let codes = [];
  //   let currentCode = code;
  //   while (currentCode) {
  //     codes.unshift(currentCode);
  //     currentCode = Object.keys(addressTree).find(parentCode => addressTree[parentCode][currentCode]);
  //   }
  //   return codes;
  // }

  // 示例：如果addressTree是层级数组，递归查找父级编码
  // const getCodeArray = (code, tree = addressTree) => {
  //   for (const item of tree) {
  //     if (item.value === code) {
  //       return [code]; // 找到当前节点，返回自身编码
  //     }
  //     if (item.children && item.children.length > 0) {
  //       const parentCodes = getCodeArray(code, item.children);
  //       if (parentCodes.length > 0) {
  //         return [item.value, ...parentCodes]; // 拼接父级编码
  //       }
  //     }
  //   }
  //   return [];
  // };

  /**
  * 根据子级编码，获取从顶级到该子级的完整编码数组
  * @param {string|number} targetCode - 目标子级编码（如140302）
  * @param {Array} tree - 待遍历的地址树（默认用全局addressTree，无需手动传参）
  * @returns {Array} - 完整编码数组（如[140000, 140300, 140302]，未找到返回空数组）
  */
  const getCodeArray = (targetCode, tree = addressTree) => {
    console.log('tree', tree)

    // 边界处理：如果树形结构不是数组，直接返回空
    if (!Array.isArray(tree) || tree.length === 0) {
      return [];
    }

    // 统一目标值类型（避免数字/字符串不匹配，如 3 vs "3"）
    // const target = String(targetCode);
    const target = String(140212);

    // 1. 遍历顶级节点（第一级）
    for (const topNode of tree) {
      // 跳过顶级节点中没有children的情况（无二级节点）
      if (!Array.isArray(topNode.children) || topNode.children.length === 0) {
        continue;
      }

      // 2. 遍历二级节点（顶级的children，第二级）
      for (const secondNode of topNode.children) {
        // 跳过二级节点中没有children的情况（无三级节点，不是最子级）
        if (!Array.isArray(secondNode.children) || secondNode.children.length === 0) {
          continue;
        }

        // 3. 遍历三级节点（二级的children，最子级）
        for (const thirdNode of secondNode.children) {
          // 匹配目标最子级value
          if (String(thirdNode.value) === target) {
            // 找到后返回 [顶级value, 父级（二级）value, 子级（三级）value]
            return [
              topNode.value,
              secondNode.value,
              thirdNode.value
            ];
          }
        }
      }
    }

    // 遍历完所有三级节点都未找到目标，返回空数组
    return [];
  };

  /**
   * 
   * @param {*} code 
   * @param {*} tree 
   * @returns 
    数据类型为 [
    label:'',value:'',children:[label:'',value:'',children:[]]
    ]
   
    最高三级
   
    我有一个最子级的value，我想找到最高value对应的父级数组
   
    例子 target：3，父级：13：顶级：14，则返回 [14,13,3]
   给我一个js方法
   */


  // 根据编码获取地址名称
  const getAddressName = (code, tree = addressTree) => {
    // 边界处理：如果当前遍历的树为空，直接返回空
    if (!Array.isArray(tree) || tree.length === 0) {
      return '';
    }
    // 遍历当前层级的所有节点
    for (const node of tree) {
      // 1. 先判断当前节点的编码是否匹配目标 code（处理数字/字符串类型不一致的情况）
      if (String(node.value) === String(code)) {
        return node.label; // 匹配成功，返回当前节点的名称
      }

      // 2. 如果当前节点有子节点，递归遍历子节点
      if (Array.isArray(node.children) && node.children.length > 0) {
        const childResult = getAddressName(code, node.children);
        // 子节点中找到结果，直接返回（避免继续遍历其他节点，提升效率）
        if (childResult) {
          return childResult;
        }
      }
    }

    // 遍历完所有节点都未找到，返回空字符串
    return '';
  };
  // 处理地址选择确认
  const confirmAddress = (values) => {

    console.log('values', values)
    setAddressCodes(values);
    // 将编码转换为对应的名称
    const addressNames = values.map(code => getAddressName(code));

    // 拼接地址字符串
    const fullAddress = addressNames.filter(Boolean).join(' ');
    setSelectedAddress(fullAddress);
    // 关闭选择器
    setVisible(false);
    // 将地址信息存入表单
    form.setFieldsValue({
      address: fullAddress,
      addressCodes: values
    });
  };

  // 表单提交处理
  const handleSubmit = async () => {
    try {
      // 触发表单校验
      const values = await form.validateFields();
      // 校验通过，打印表单信息
      let data = {
        name: values.name,
        mobile: values.mobile,
        areaId: addressCodes[addressCodes.length - 1] || null,
        detailAddress: values.detailAddress,
        defaultStatus: values.defaultStatus ? true : false
      }
      try {
        setBtnLoading(true)
        let res = null
        if (id) {
          data.id = id
          res = await addressApi.address_update(data)
        } else {
          res = await addressApi.address_create(data)
        }
        if (res.msg == "") {
          Toast.show({ content: `地址${id ? '编辑' : '添加'}成功`, duration: 1500, type: 'success' });
          navigate(returnUrl)
        }
      } finally {
        setBtnLoading(false)
      }

    } catch (error) {
      // 校验失败处理
      console.log('表单校验失败:', error);
      Toast.show({
        content: '请完善信息并确保格式正确',
        duration: 1500,
        type: 'fail',
      });
    }
  };

  // 手机号校验规则
  const mobileRegExp = /^1[3-9]\d{9}$/;

  return (
    <div className="editAddress">
      <div className="order-header">{id ? '编辑' : '新增'}地址</div>
      <Form form={form} requiredMarkStyle="asterisk">
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            { required: true, message: '请输入姓名' },
            { min: 2, message: '姓名至少2个字符' }
          ]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>

        <Form.Item
          name="mobile"
          label="手机号"
          rules={[
            { required: true, message: '请输入手机号' },
            { pattern: mobileRegExp, message: '请输入正确的手机号格式' }
          ]}
        >
          <Input placeholder="请输入手机号" type="tel" />
        </Form.Item>

        <Form.Item
          name="address"
          label="地址"
          rules={[{ required: true, message: '请选择地址' }]}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {selectedAddress || '未选择地址'}
            </div>
            <Button size="mini" color="success" style={{ marginLeft: '10px' }} onClick={() => setVisible(true)}>
              选择地址
            </Button>
          </div>
        </Form.Item>

        <Form.Item name="detailAddress" label="详细地址"
          rules={[{ required: true, message: '请输入详细地址' }, { min: 5, message: '详细地址至少5个字符' }]}
        >
          <Input placeholder="请输入门牌号等详细信息" />
        </Form.Item>

        <Form.Item name="defaultStatus" label="默认地址" >
          <Switch checked={defaultChecked} onChange={(val) => { setDefaultChecked(val) }} />
        </Form.Item>

        {/* 确定按钮 */}
        <div style={{ marginTop: 20, padding: '0 16px' }}>
          <Button color="primary" loading={btnLoading} block onClick={handleSubmit} style={{ height: 48 }}>  确定 </Button>
        </div>
      </Form>

      <Cascader
        options={addressTree}
        placeholder="请选择地址"
        visible={visible}
        onConfirm={confirmAddress}
        onClose={() => setVisible(false)}
        value={addressCodes}
        level={3} // 限制选择到区/县级别
      />
    </div>
  );
};
